<template>
  <div class="nanning-screen-search" :style="{ background: `url(${bacUrl}) no-repeat`, backgroundSize: '100% 100%' }">
    <input type="text" :placeholder="placeholderValue" :value="searchValue" @input="onInputSearch" @blur="onBlurSearch" @click="onClickInput" />
    <span class="search-text" @click="onClickSearch">搜索</span>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Emit } from 'vue-property-decorator'
@Component({
  name: 'nanning-screen-search'
})
export default class NanningScreenSearch extends Vue {
  @Prop({ default: '' }) private searchValue!: string

  @Prop({ default: '' }) private placeholderValue!: string

  @Prop({ default: require('assets/images/situational-awareness/search-bac.png') }) private bacUrl!: string

  @Emit()
  private onInputSearch(e: any) {
    return e.target.value
  }

  @Emit()
  private onBlurSearch(e: any) {
    return e.target.value
  }

  @Emit()
  // eslint-disable-next-line @typescript-eslint/no-empty-function
  private onClickSearch() {}

  @Emit()
  private onClickInput() {
    return {
      visibleSearchPop: true
    }
  }
}
</script>

<style lang="scss" scoped>
.nanning-screen-search {
  box-sizing: border-box;
  width: 100%;
  height: 42px;
  background: url('../../assets/images/situational-awareness/search-bac.png') no-repeat center;
  background-size: 100% 100%;
  position: relative;
  input {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background: none;
    outline: none;
    border: none;
    padding-left: 57px;
    background: url('../../assets/images/situational-awareness/search-icon.png') no-repeat;
    background-size: 24px 24px;
    background-position: 25px center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    font-family: 'PingFang Regular';
  }
  //设置占位符字体颜色为红色
  input::-webkit-input-placeholder {
    /* WebKit browsers */
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    font-family: 'PingFang Regular';
  }
  input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: rgba(255, 255, 255, 0.7);
  }
  input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
  }
  input:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
  }
  .search-text {
    position: absolute;
    right: 0;
    top: 0;
    width: 66px;
    height: 42px;
    text-align: center;
    line-height: 42px;
    display: block;
    background: #114da7;
    font-size: 18px;
    font-family: 'PingFang Regular';
    color: #ffffff;
    cursor: pointer;
    &::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      display: none;
      background: rgba(0, 0, 0, 0.3);
    }
    &:active::after {
      display: block;
    }
  }
  // &::before {
  //   content: '搜索';
  //   position: absolute;
  //   right: 0;
  //   top: 0;
  //   width: 66px;
  //   height: 42px;
  //   line-height: 42px;
  //   display: block;
  //   background: #114da7;
  //   font-size: 18px;
  //   font-family: 'PingFang Regular';
  //   color: #ffffff;
  // }
}
</style>
